<template>
  <div class="about">
    <h1>dialog</h1>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <!-- 弹框 -->
    <el-dialog title="选择系统菜单" :visible.sync="dialogVisible" width="60%">
      <!-- <span>这是一段信息</span> -->
      <div class="roleSetting">
        <div class="selection"></div>
        <div
          v-for="(partition, partitionIndex) in distributorsInfo"
          :key="partitionIndex"
          class="role-box"
        >
          <!-- 每个隔断遍历 -->
          <div class="selection">
            <p>
              <el-checkbox
                :key="partitionIndex"
                v-model="partition.selected"
                :indeterminate="partition.indeterminate"
                @change="
                  handleCheckedCountryAllChange(
                    partitionIndex,
                    partition.partitionId,
                    $event
                  )
                "
                >{{ partition.partitionName }}</el-checkbox
              >
            </p>
          </div>
          <!-- 每个隔断中的子集遍历 -->
          <div class="modules">
            <el-checkbox
              v-for="children in partition.children"
              :key="children.child_id"
              v-model="children.selected"
              :label="children.partitionName"
              @change="
                handleCheckedCountryChange(
                  partitionIndex,
                  children.child_id,
                  partition.partitionId,
                  $event
                )
              "
            >
              <!-- {{ children.fieldName }} -->
              {{ children.fieldName }}
            </el-checkbox>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹框 -->
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 50%">
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          v-if="item.field"
          :label="item.title"
          :prop="item.field"
          :width="item.width"
        >
          <template slot-scope="scope">{{ scope.row[item.field] }}</template>
        </el-table-column>
        <!-- 自定义 -->
        <el-table-column
          :label="item.title"
          :key="index"
          :width="item.width"
          v-else
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.handleData" label="查看"
              >查看</el-checkbox
            >
            <el-checkbox v-model="scope.row.handleData" label="读写"
              >读写</el-checkbox
            >
            <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
            <div
              class="el-icon-delete"
              @click="scope.row.handleData = []"
            ></div>
          </template>
        </el-table-column>
        <!-- 自定义 -->
      </template>
    </el-table>
    <!-- 表格 -->
  </div>
</template>
<script>
import { getDialogList } from "@/api/diaLog";
export default {
  created() {
    //加载页面请求接口
    getDialogList(this.params).then((res) => {
      console.log(res);
      this.distributorsInfo = res.data;
    });
  },
  computed: {
    // 计算属性存储的选中数据
    selectedChild: function () {
      let temp = [];
      this.distributorsInfo.forEach((item) => {
        //item一级
        console.log(item);
        item.children.forEach((child) => {
          if (child.selected) {
            // temp.push([item.partitionName, child.fieldName]); //将选中文件名  或者id返回后端
            temp.push({
              partitionName: item.partitionName,
              fieldName: child.fieldName,
              handleData: [],
            }); //将选中文件名  或者id返回后端
          }
        });
      });
      // `this` 指向 vm 实例
      return temp;
    },
  },
  data() {
    return {
      //接口数据参数
      params: {
        userid: 111111,
      },
      //表格列数据
      columns: [
        { title: "一级菜单", field: "partitionName", width: "150" },
        { title: "二级菜单", field: "fieldName", width: "150" },
        { title: "操作" },
      ],
      //表格数据
      tableData: [],
      //dialog显示隐藏
      dialogVisible: false,
      distributorsInfo: [
        // {
        //   partitionName: "渠道管理",
        //   selected: false,
        //   partitionId: 1,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "1",
        //       fieldName: "一级渠道库",
        //       selected: false,
        //     },
        //     {
        //       child_id: "2",
        //       fieldName: "渠道用户配置",
        //       selected: false,
        //     },
        //     {
        //       child_id: "3",
        //       fieldName: "子渠道配置",
        //       selected: false,
        //     },
        //   ],
        // },
        // {
        //   partitionName: "活动管理",
        //   selected: false,
        //   partitionId: 2,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "4",
        //       fieldName: "活动库",
        //       selected: false,
        //     },
        //     {
        //       child_id: "5",
        //       fieldName: "活动编辑",
        //       selected: false,
        //     },
        //     {
        //       child_id: "6",
        //       fieldName: "活动审核",
        //       selected: false,
        //     },
        //     {
        //       child_id: "7",
        //       fieldName: "活动下线",
        //       selected: false,
        //     },
        //   ],
        // },
        // {
        //   partitionName: "推广数据",
        //   selected: false,
        //   partitionId: 3,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "8",
        //       fieldName: "活动数据",
        //       selected: false,
        //     },
        //     {
        //       child_id: "9",
        //       fieldName: "数据报表",
        //       selected: false,
        //     },
        //     {
        //       child_id: "10",
        //       fieldName: "渠道数据",
        //       selected: false,
        //     },
        //     {
        //       child_id: "11",
        //       fieldName: "渠道报表",
        //       selected: false,
        //     },
        //   ],
        // },
        // {
        //   partitionName: "推荐资源",
        //   selected: false,
        //   partitionId: 4,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "12",
        //       fieldName: "咪咕APP",
        //       selected: false,
        //     },
        //     {
        //       child_id: "13",
        //       fieldName: "活动专题",
        //       selected: false,
        //     },
        //     {
        //       child_id: "14",
        //       fieldName: "活动专题聚合页",
        //       selected: false,
        //     },
        //   ],
        // },
        // {
        //   partitionName: "知识库",
        //   selected: false,
        //   partitionId: 5,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "15",
        //       fieldName: "知识库表",
        //       selected: false,
        //     },
        //     {
        //       child_id: "16",
        //       fieldName: "知识库分类",
        //       selected: false,
        //     },
        //   ],
        // },
        // {
        //   partitionName: "系统配置",
        //   selected: false,
        //   partitionId: 6,
        //   isIndeterminate: false,
        //   children: [
        //     {
        //       child_id: "17",
        //       fieldName: "数据参数",
        //       selected: false,
        //     },
        //     {
        //       child_id: "18",
        //       fieldName: "数据同步管理",
        //       selected: false,
        //     },
        //   ],
        // },
      ],
      ischeckAll: false, // 一级全选状态
      setDistributorDailog: false,
      cancelDistributorDailog: false,
      indeterminate: false, //用于实现全选的效果
    };
  },
  methods: {
    //提交表单
    submitFn() {
      this.dialogVisible = false;

      this.tableData = this.selectedChild;
      console.log(this.selectedChild);
    },
    handleCheckAllChange(e) {
      // 一级change事件
      this.ischeckAll = e;
      if (e == true) {
        this.indeterminate = false;
        for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
          // 二级全选反选不确定
          this.distributorsInfo[i].selected = e;
          for (
            let j = 0, len1 = this.distributorsInfo[i].children.length;
            j < len1;
            j++
          ) {
            this.distributorsInfo[i].children[j].selected = e;
          }
        }
      } else {
        this.indeterminate = false;
        for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
          // 三级全选反选不确定
          this.distributorsInfo[i].selected = e;
          for (
            let j = 0, len1 = this.distributorsInfo[i].children.length;
            j < len1;
            j++
          ) {
            this.distributorsInfo[i].children[j].selected = e;
          }
        }
      }
      //   console.log("0000", this.distributorsInfo);
    },
    handleCheckedCountryAllChange(index, topId, e) {
      // 二级change事件
      this.distributorsInfo[index].selected = e; // 二级勾选后，子级全部勾选或者取消
      if (e == false) this.distributorsInfo[index].indeterminate = false; // 去掉二级不确定状态
      let childrenArray = this.distributorsInfo[index].children;
      if (childrenArray) {
        for (let i = 0, len = childrenArray.length; i < len; i++) {
          childrenArray[i].selected = e;
        }
      }

      this.getIsCheckAll();
    },
    handleCheckedCountryChange(topIndex, sonId, topId, e) {
      // 三级change事件
      let childrenArray = this.distributorsInfo[topIndex].children;
      let tickCount = 0;
      let unTickCount = 0;
      let len = childrenArray.length;
      for (let i = 0; i < len; i++) {
        if (sonId == childrenArray[i].child_id) childrenArray[i].selected = e;
        if (childrenArray[i].selected == true) tickCount++;
        if (childrenArray[i].selected == false) unTickCount++;
      }
      if (tickCount == len) {
        // 三级级全勾选
        this.distributorsInfo[topIndex].selected = true;
        this.distributorsInfo[topIndex].indeterminate = false;
      } else if (unTickCount == len) {
        // 三级级全不勾选
        this.distributorsInfo[topIndex].selected = false;
        this.distributorsInfo[topIndex].indeterminate = false;
      } else {
        this.distributorsInfo[topIndex].selected = false;
        this.distributorsInfo[topIndex].indeterminate = true; // 添加二级不确定状态
      }

      this.getIsCheckAll();
    },
    getIsCheckAll() {
      let tickCount = 0;
      let unTickCount = 0;
      let ArrLength = this.distributorsInfo.length;
      for (let j = 0; j < ArrLength; j++) {
        // 全选checkbox状态
        if (this.distributorsInfo[j].selected == true) tickCount++;
        if (this.distributorsInfo[j].selected == false) unTickCount++;
      }
      if (tickCount == ArrLength) {
        // 二级全勾选
        this.ischeckAll = true;
        this.indeterminate = false;
      } else if (unTickCount == ArrLength) {
        // 二级全不勾选
        this.ischeckAll = false;
        this.indeterminate = false;
      } else {
        this.ischeckAll = false;
        this.indeterminate = true; // 添加一级不确定状态
      }
      console.log("0111", this.distributorsInfo);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
::v-deep .el-dialog__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn {
    position: absolute;
    top: 16px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
  }
  padding: 13px 20px 10px;
  background: linear-gradient(to bottom, #91c2f9 0%, #74adf7 100%);
  //   overflow: hidden;
  font-size: 15px;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .role-box {
  padding-top: 15px;
  .modules {
    padding-top: 10px;
  }
}
::v-deep .cell {
  text-align: center;
}
::v-deep .el-icon-delete {
  display: inline-block;
  padding-left: 25px;
  line-height: 25px;
  font-size: 16px;
  color: red;
}
</style>
